import React from 'react'
import PropTypes from 'prop-types'
import { Modal, Form, Input, Select, Avatar, Button, Upload, Icon, message,Checkbox } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import api from "../../../../api/api";
import axios from 'axios';
import lodash from 'lodash'
// import { Upload, message, Button, Icon } from 'antd';
const { Option } = Select;
const FormItem = Form.Item;


function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('请选择png或者jpg图片');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('图片大小不能超过2M');
  }
  return isJpgOrPng && isLt2M;
}

@Form.create()
class Model extends React.Component {

  formRef = React.createRef()
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      hiddenFlag:true,
      visible: false,
      intervalObj: Object,
      intervalCount: 0,
      param: {
        id:"",
        reserveRoom:"",
        reservePhone: "",
        reserveName: "",
      }
    };
  }
  componentDidMount() {
    this.clearData()
    this.props.onRef(this)

    console.log("dialog初始化==", this.props);
  }
  componentWillUnmount(){
    clearInterval(this.state.intervalObj)
  }

  /**
   * 确定
   */
  handleOk = () => {
    this.props.form.validateFields((error, values) => {
      let { param } = this.state
      param.reserveName=values.reserveName
      param.reservePhone=values.reservePhone
      param.reserveRoom=values.reserveRoom
      this.setState({ param }, () => {
        this.handleOkData()
      })
    })
  }

  /**
   * 添加，编辑请求提交   加url和id
   */
  handleOkData() {
    let { param } = this.state
    param.id = this.props.data.gridList.id
    let url = ""
    console.log( this.props.data.gridList.id)
    console.log(param.id)
    if(this.props.data.type === 2) {         //编辑
      url = api.api_URL + "/reserve/updateReserveMessage"

      this.setState({ param }, () => {
        this.addUser(url)
      })
    }else if(this.props.data.type === 1) {   //添加
      url = api.api_URL + "/reserve/insertReserveMessage"
      this.setState({ param }, () => {
          this.addUser(url)
        })
      }
    }


  /**
   * 添加，编辑最终请求
   */
  addUser(url){
    const that = this;
    console.log(this.state.param)
    axios({
      method: 'POST',
      url: url,
      data: JSON.stringify(this.state.param),
      headers: {
        "Authorization": localStorage.getItem('token'),
        "Content-Type": "application/json;charset=UTF-8"
      },
    }).then(function (response) {
      console.log(response)
      that.handleCancel()
      message.success({content:"成功！"})
    })
  }

  //初始化编辑数据
  initEditData = () => {
    let that = this;
    that.setBaseInfo();
  }
  //编辑的初始值设置
  setBaseInfo(){
    let data = this.props.data.gridList
    console.log(data)
    const { form } = this.props;
    // if (1){
      //clearInterval(this.state.intervalObj)
      Object.keys(form.getFieldsValue()).forEach(key => {
        const obj = {};
        if (data[key]) {
          obj[key] = data[key] || null;
        }
        form.setFieldsValue(obj);
      });

    }



  handleCancel = e => {
    this.clearData()
    this.props.handleCancel()
  };




  //清空form表单数据
  clearData(){
    this.props.form.resetFields();
    this.setState({
      hiddenFlag: true,
      param:{
        reservePhone: "",
        reserveName: "",
      }
    })
  };




  render() {
    const { getFieldDecorator, getFieldError } = this.props.form
    const CheckboxGroup = Checkbox.Group;
    const uploadButton = (
        <div>
          {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
          <div className="ant-upload-text">上传头像</div>
        </div>
    );
    return (
      <div>
        <Modal
          title={this.props.data.title}
          visible={this.props.data.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form name="control-ref"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            layout="horizontal"
          >
            <FormItem  label="姓名" name="reserveName" >
              {getFieldDecorator("reserveName", {})(
                  <Input />
              )}
            </FormItem>
            <FormItem   label="联系方式" name="reservePhone" >
              {getFieldDecorator("reservePhone", {
              rules: [{ required: true, message: '请填写客户电话!',whitespace: true,}] ,
              })(
                  <Input />
              )}
            </FormItem>
            <FormItem   label="房间号" name="reserveRoom" >
              {getFieldDecorator("reserveRoom", {
                rules: [{ required: true, message: '请填写房间号!',whitespace: true,}] ,
              })(
                  <Input />
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}

Model.propTypes = {
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}
export default Model
